<script setup lang='ts'>
import { useSupplierMaterial } from "./hooks/SupplierMaterial";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import EStamp from "@iconify-icons/ep/stamp";
import Delivery from "./component/Delivery.vue"
import InboundDelivery from "./component/InboundDelivery.vue"
const {
  Vdialog,
  loading,
  columns,
  dataList,
  DispatchForm,
  roundAddress,
  Signet,
  isSeal,
  nextStep,
  pagination,
  handleSizeChange,
  handleCurrentChange,
  orderList,
  FormDisabled,
  generateRandomCode,
  MaterialDetails,
  changeOrder,
  changeShipTime,
  clickNextStep,
  finish,
  ClosePanelVisible,
  showdialog,
  receptVisible,
  handleRecept,
  confirmAccept,
  isAccept,
} = useSupplierMaterial()
</script>

<template>
  <div class="main">
    <PureTableBar title="发货单列表" class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="Vdialog = true">委托发货</el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" adaptive :loading="loading"
          :pagination="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" size="small"
          :data="dataList" max-height="600" :columns="columns" :checkList="checkList" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' size="small" text @click="MaterialDetails(row)"> 详情 </el-button>
            <el-button type='primary' size="small" text @click="handleRecept(row)" v-if="row.isInWarehouse == 1"> 回单确认
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <!-- 新增 -->
    <ReDialog :width="1000" :height="500" :models="Vdialog" @Closes="ClosePanelVisible()">
      <template #header>
        <h2 style="text-align: center;">委托发货</h2>
      </template>
      <template #main>
        <el-scrollbar height="420px">
          <div v-show="!nextStep">
            <dl class="DispatchForm_header">
              <dd>
                采购项目名称： <el-select v-model="DispatchForm.purchaseName" placeholder="请选择采购项目" @change="changeOrder()"
                  style="width:62%;margin-left:9px">
                  <el-option v-for="item in orderList" :key="item.purchaseOrderId" :label="item.supplyName"
                    :value="item.purchaseOrderId" />
                </el-select>
              </dd>
              <dd>NO:<span class="number">{{ DispatchForm.trackingNumber }}</span> </dd>
            </dl>
            <el-form label-width="120px" :inline="true" class="DispatchForm">
              <el-form-item label="发货日期： ">
                <el-date-picker v-model="DispatchForm.shipDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  placeholder="请选择发货日期" size="default" @change="changeShipTime()" />
              </el-form-item>
              <el-form-item label="收货人名称：">
                {{ DispatchForm.receiveName }}
              </el-form-item>
              <el-form-item label="发货人名称：">
                {{ DispatchForm.deliverName }}
              </el-form-item>
              <el-form-item label="承运人名称：">
                {{ DispatchForm.carrierName }}
              </el-form-item>
              <el-form-item label="下单日期：">
                {{ DispatchForm.orderDate }}
              </el-form-item>
              <el-form-item label="交货时间：">
                {{ DispatchForm.deliveryTime }}
              </el-form-item>
              <el-form-item label="付款方式：">
                {{ '在线支付' }}
              </el-form-item>
              <el-form-item label="交货方式：">
                {{ '一次性交货' }}
              </el-form-item>
              <el-form-item label="交货地址：">
                {{ DispatchForm.adress }}
              </el-form-item>
            </el-form>
            <div style="margin-bottom: 20px;padding:0 36px;text-align: center;">
              <table>
                <tr>
                  <th style="width:150px">序号</th>
                  <th style="width:150px">物品名称</th>
                  <th style="width:100px">单位</th>
                  <th style="width:200px">数量</th>
                  <th style="width:150px">单价（元/件）</th>
                  <th style="width:150px">金额（元）</th>
                </tr>
                <tbody>
                  <tr v-for="(item, index) in DispatchForm.infoList">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.ProductName }}</td>
                    <td>个</td>
                    <td>
                      {{ item.Quantity }}
                    </td>
                    <td>{{ item.Price }}</td>
                    <td>{{ item.total }}</td>
                  </tr>
                  <tr>
                    <td>总金额（元）</td>
                    <td colspan="5">
                      {{ DispatchForm.totalMoney }}元
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="DispatchForm_date">
              <ul>
                <span class="mySignet" id="view_FQX"></span>
                <li>发货人（盖章）
                  <el-button text :icon="useRenderIcon(EStamp)" title="盖章" @click="Signet" v-if="!isSeal"></el-button>
                </li>
                <li>日 期： {{ DispatchForm.shipDate }}</li>
              </ul>
              <ul>
                <li>承运人（盖章）</li>
                <li>日 期：{{ DispatchForm.shipDate }}</li>
              </ul>
            </div>
          </div>
          <div v-if="nextStep">
            <Delivery :data="DispatchForm" Showtype="create" />
          </div>
        </el-scrollbar>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <div v-if="!nextStep">
            <el-button class="ml-3" type="primary" @click="clickNextStep()">下一步</el-button>
            <el-button class="ml-3" @click="ClosePanelVisible()">取消</el-button>
          </div>
          <div v-else>
            <el-button class="ml-3" type="primary" @click="nextStep = false">上一步</el-button>
            <el-button class="ml-3" type="primary" @click="finish()">完成</el-button>
            <el-button class="ml-3" @click="ClosePanelVisible()">取消</el-button>
          </div>
        </span>
      </template>
    </ReDialog>


    <!-- 查看详情 -->
    <ReDialog :width="1000" :height="500" :models="showdialog" @Closes="ClosePanelVisible()">
      <template #header>
        <h2 style="text-align: center;">委托发货</h2>
      </template>
      <template #main>
        <el-scrollbar height="420px">
          <div v-show="!nextStep">
            <dl class="DispatchForm_header">
              <dd style="margin-left: 10px;">
                采购项目名称：<span style="margin-left: 10px;">{{ DispatchForm.purchaseName }}</span>
              </dd>
              <dd>NO:<span class="number">{{ DispatchForm.trackingNumber }}</span> </dd>
            </dl>
            <el-form label-width="120px" :inline="true" class="DispatchForm">
              <el-form-item label="发货日期：">
                <el-date-picker v-model="DispatchForm.shipDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                  placeholder="请选择发货日期" size="default" disabled />
              </el-form-item>
              <el-form-item label="收货人名称：">
                {{ DispatchForm.receiveName }}
              </el-form-item>
              <el-form-item label="发货人名称：">
                {{ DispatchForm.deliverName }}
              </el-form-item>
              <el-form-item label="承运人名称：">
                {{ DispatchForm.carrierName }}
              </el-form-item>
              <el-form-item label="下单日期：">
                {{ DispatchForm.orderDate }}
              </el-form-item>
              <el-form-item label="交货时间：">
                {{ DispatchForm.deliveryTime }}
              </el-form-item>
              <el-form-item label="付款方式：">
                {{ '在线支付' }}
              </el-form-item>
              <el-form-item label="交货方式：">
                {{ "一次性交货" }}
              </el-form-item>
              <el-form-item label="交货地址：">
                {{ DispatchForm.adress }}
              </el-form-item>
            </el-form>
            <div style="margin-bottom: 20px;padding:0 36px;text-align:center">
              <table>
                <tr>
                  <th style="width:150px">序号</th>
                  <th style="width:150px">物品名称</th>
                  <th style="width:100px">单位</th>
                  <th style="width:200px">数量</th>
                  <th style="width:150px">单价（元/件）</th>
                  <th style="width:150px">金额（元）</th>
                </tr>
                <tbody>
                  <tr v-for="(item, index) in DispatchForm.infoList">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.ProductName }}</td>
                    <td>个</td>
                    <td>
                      {{ item.Quantity }}
                    </td>
                    <td>{{ item.Price }}</td>
                    <td>{{ item.total }}</td>
                  </tr>
                  <tr>
                    <td>总金额（元）</td>
                    <td colspan="5">
                      {{ DispatchForm.totalMoney }}元
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="DispatchForm_date">
              <ul>
                <span class="mySignet" id="view_FQX"></span>
                <li>发货人（盖章）

                </li>
                <li>日 期： {{ DispatchForm.shipDate }}</li>
              </ul>
              <ul>
                <span class="mySignet" id="view_FQXSHOW"></span>
                <li>承运人（盖章）</li>
                <li>日 期：{{ DispatchForm.shipDate }}</li>
              </ul>
            </div>
          </div>
          <div v-if="nextStep">
            <InboundDelivery :data="DispatchForm" :Showtype="isAccept ? 'showDetail' : 'onlyCheck'" />
            <!-- <Delivery :data="DispatchForm" :Showtype="isAccept ? 'handleDelivery' : 'create'" /> -->
          </div>
        </el-scrollbar>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <div v-if="!nextStep">
            <el-button class="ml-3" type="primary" @click="nextStep = true">下一步</el-button>
            <el-button class="ml-3" @click="ClosePanelVisible()">取消</el-button>
          </div>
          <div v-else>
            <el-button class="ml-3" type="primary" @click="nextStep = false">上一步</el-button>
            <el-button class="ml-3" @click="ClosePanelVisible()">取消</el-button>
          </div>
        </span>
      </template>
    </ReDialog>
  </div>

  <ReDialog :width="1000" :height="500" :models="receptVisible" @Closes="receptVisible = false">
    <template #header>
      <h2 style="text-align: center;">回单确认</h2>
    </template>
    <template #main>
      <el-scrollbar height="420px">
        <div>
          <InboundDelivery :data="DispatchForm" :Showtype="'showDetail'" />
        </div>
      </el-scrollbar>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <div>
          <el-button class="ml-3" type="primary" @click="confirmAccept()">确认</el-button>
          <el-button class="ml-3" @click="receptVisible = false">取消</el-button>
        </div>
      </span>
    </template>
  </ReDialog>
</template>

<style scoped lang="scss">
@import url("@/style/CreditComm.scss");

.DispatchForm {
  display: flex;
  flex-wrap: wrap;

  :deep(.el-form-item) {
    margin-right: 0;
    margin-bottom: 8px;

    .el-form-item__content {
      width: 192px;
    }
  }
}

.DispatchForm_date {
  display: flex;
  padding: 35px 36px;
  border: 1px solid #ebeef5;
  border-top: none;

  ul {
    width: 40%;
    text-align: left;
    position: relative;

    li {
      line-height: 32px;
    }
  }
}

.DispatchForm_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 9px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;

  h1 {
    font-size: 24px;
  }
}

.number {
  position: relative;
  display: inline-block;

  &:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
  }
}

:deep(.el-dialog__footer) {
  text-align: center;
}

:deep(.el-form-item__label) {
  font-weight: 700
}

table,
th,
td {
  border: 1px solid #bab9b9;
  border-collapse: collapse;
}

.mySignet {
  position: absolute;
  width: 130px;
  height: 130px;
  left: 13%;
  top: 1%;
}
</style>
